<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
		<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mutong.css" />
		<title>沐桐环保</title>
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
		<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/baseConfig.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--index.wxml-->
		<div class="container">
		  <div class='headTime'>
		    <div class='leftdate'>   
		     <image src='../../img/date.png' class='dateImg' />
			 <span class="dataName">2019</span>
		    </div>
		    <div class='rightdate'>
		      <div>
		      <span class='year active' data-name='year'>年</span>
			  <span class='month' data-name='month'>月</span>
			  <span class='day ' data-name='day'>日</span>
		      </div> 
		    </div>
		  </div>
		  <div class='navTop navTop2'>
		      <div class='navLeft' style="">
		        <span>采购入库</span>
		      </div>
		      <div class='navRight' style="">
		       <span>拆解生产</span>
		      </div>   
		  </div>
		    <div id="mychart-dom-gauge"></div>
		    <div >
		      <div id="mychart-dom-Hbar"></div>
		      <div id="mychart-dom-Hbar2"></div>
		    </div>
		      
		    <div class='navbottom'>
				<div class='addsupplier'>
					<span class='name'>新增供应商</span>
					<span class='num'>0位</span>
				</div>
				<div class='addpurchase'>
					<span class='name'>新增采购合同</span>
					<span class='num'>0份</span>
				</div>
				<div class='addputin'>
					<span class='name'>产物入库</span>
					<span class='num'>0吨</span>
				</div>
			</div>
		</div>
		<nav class='group-list' style="height: 48%;display: none;">
	        <!--<div class='group-warp'>
	           <div class='first'>
	              <span class='team-name'>{{item.workTeamName}}</span> <span class='team-time'>{{item.workTimeName}}</span>
	              <span class='team-error'>{{item.materialName}}</span>
	           </div>
	           <div class='second'>
	              <span class='team-charging'>完成量/目标量(台)：{{item.actualQuantity}}/{{item.planQuantity}}</span>
	              <span class='team-error'>完成率：{{item.finishPercent}}%</span>
	           </div>
	           <div class='third'>
	              <span class='team-charging'>拆解量/产出量(KG)：{{item.actualWeight}}/{{item.productWeight}}</span> 
	              <span class='team-produce'>误差：{{item.wuchaWeight}}KG/{{!item.wuchaPercent?0:item.wuchaPercent}}%</span>
	           </div>
	        </div>-->
	    </nav>
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			var date = baseConfig.GetQueryString("date")		
			//创建一个全局对象
			var fn = {
				data: getNowTime('year'), //默认时间
				dataName: 'year', //定义默认选择日期
				gauge: echarts.init(document.getElementById('mychart-dom-gauge')), //获取半圆图echarts实例
				myEchart:echarts.init(document.getElementById('mychart-dom-Hbar')),
				myEchart2:echarts.init(document.getElementById('mychart-dom-Hbar2')),
				//addsupplier:`0位`,  //新增供应商
				//addpurchase:`0份`,   //新增采购合同
				//addputin:`0吨`,      //产物入库
				yearClick: function() { //点击年切换时间	
					this.data = getNowTime().slice(0, 4)
					$(".dataName").html(fn.data)
					this.productInfo(getNowTime('year'))	
					$("#mychart-dom-Hbar").show()
					$("#mychart-dom-Hbar2").show()
					$(".group-list").hide()
				},
				monthClick: function() { //点击日切换时间
					this.data = getNowTime().slice(0, 7)
					$(".dataName").html(fn.data)
					this.productInfo(getNowTime('month'))
					$("#mychart-dom-Hbar").show()
					$("#mychart-dom-Hbar2").show()
					$(".group-list").hide()
				},
				dayClick: function() { //点击日切换
					this.data = getNowTime()
					$(".dataName").html(fn.data)
					this.productInfo(getNowTime('day'))
					$("#mychart-dom-Hbar").hide()
					$("#mychart-dom-Hbar2").hide()
					$(".group-list").show()
				},
				/*查询渲染的函数*/

				  //按年月日查询当前页面的接口函数
				  productInfo:function(time,fun){
//				    var _this = this
				    $.ajax({
				      type: "get",
				      url: baseConfig.localHttp +'weChat/small/productInfo',    //你请求数据的接口地址
				      data: {
				        time: time
				      },
				      success: (res)=>{
//				        console.log(res)
				        var finishCount = res.content.finishCount  //获取当前年/月/日的完成量
				        var planCount = res.content.planCount //获取当前年/月/日计划完成量
				        var finishPercent = res.content.finishPercent  //完成比
				        fn.gauge.setOption(fn.getchart(finishCount, finishPercent))   //第一个图
				
				        var list = res.content.cjList
				        var temaList = res.content.teamList
				        var dataAxis = [];  //获取x轴的时间
				        var data = [];   //获取y轴的数据
				        var allcount = 0 //获取总拆解台数
				        var Cjdata = []; //拆解重量
				        var Cwdata = []; //产物重量
				        var $li = ""
				        if(!list){
				            $("#mychart-dom-Hbar").hide()
						    $("#mychart-dom-Hbar2").hide()
						    $(".group-list").show()
						    for(var i=0;i<temaList.length;i++){
						    	$li += `<div class='group-warp'>
								           <div class='first'>
								              <span class='team-name'>${temaList[i].workTeamName}</span> <span class='team-time'>${temaList[i].workTimeName}</span>
								              <span class='team-error'>${temaList[i].materialName}</span>
								           </div>
								           <div class='second'>
								              <span class='team-charging'>完成量/目标量(台)：${temaList[i].actualQuantity}/${temaList[i].planQuantity}</span>
								              <span class='team-error'>完成率：${temaList[i].finishPercent}%</span>
								           </div>
								           <div class='third'>
								              <span class='team-charging'>拆解量/产出量(KG)：${temaList[i].actualWeight}/${temaList[i].productWeight}</span> 
								              <span class='team-produce'>误差：${temaList[i].wuchaWeight}KG/${!temaList[i].wuchaPercent?0:temaList[i].wuchaPercent}%</span>
								           </div>
								        </div>`
						    }
						    $(".group-list").html($li)
						    
						    
						    
				        }else if(list.length>12){         
				          for (var i = 0; i < list.length; i++) {
				            dataAxis.push(list[i].time + '日')
				            data.push(list[i].count)
				            allcount += list[i].count*1
				            Cjdata.push(list[i].chaijieWeight)
				            Cwdata.push(list[i].productWeight)
				          }
				          $("#mychart-dom-Hbar").show()
						  $("#mychart-dom-Hbar2").show()
						  $(".group-list").hide()
						  fn.myEchart.setOption(fn.getHistogram(dataAxis, data, yMax, allcount))  //第二个图
				          var temp = data.sort(function (a, b) { return b - a })[0]
				          var yMax = temp + 2  //设置y轴最大值,比当前列表最大值大2
				          fn.myEchart2.setOption(fn.echartAxis(dataAxis, Cjdata, Cwdata))
				        }else{         
				          for (var i = 0; i < list.length; i++) {
				            dataAxis.push(list[i].time + '月')
				            data.push(list[i].count)
				            allcount += list[i].count*1
				            Cjdata.push(list[i].chaijieWeight)
				            Cwdata.push(list[i].productWeight)
				          }
						  $("#mychart-dom-Hbar").show()
						  $("#mychart-dom-Hbar2").show()
						  $(".group-list").hide()
						  fn.myEchart.setOption(fn.getHistogram(dataAxis, data, yMax, allcount)) //第二个图
				          var temp = data.sort(function (a, b) { return b - a })[0]
				          var yMax = temp + 2  //设置y轴最大值,比当前列表最大值大2				          				          
				          fn.myEchart2.setOption(fn.echartAxis(dataAxis, Cjdata, Cwdata))
				        }
				        
				      }
				    })
				    //获取底部数据
				    $.ajax({
				      type:'get',
				      url: baseConfig.localHttp +'weChat/small/footerInfo',
				      data: {
				        time: time
				      },
				      success: function (res) {
				        var data = res.content
						$(".addsupplier .num").html(`${data.clientCount}位`)
						$(".addpurchase .num").html(`${data.contractCount}份`)
						$(".addputin .num").html(`${data.productWeight}吨`)
				      }
				    })
				  },
				 /*获取仪表盘图表*/
			  getchart:function(count,value){
			    return {
			      graphic: [
			        {
			          type: 'text',
			          z: 100,
			          left: 'center',
			          top: '30%',
			          style: {
			            x: 3,
			            y: 10,
			            fontSize: 12,
			            fill: '#fff',
			            text: [			              
			              '完成' + count + '台',
			            ].join('\n'),
			            font: 'bolder 1em "Microsoft YaHei", sans-serif',
			            textAlign: 'center',//3、居中显示
			          }
			        }],
			      series: [
			        {
			          type: "gauge",
			          center: ["50%", "45%"], // 仪表位置
			          radius: "90%", //仪表大小
			          startAngle: 180, //开始角度
			          endAngle: 0, //结束角度
			          axisLine: {
			            show: false,
			            lineStyle: { // 属性lineStyle控制线条样式
			              color: [
			                [0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			                  offset: 1,
			                  color: "#E75F25" // 50% 处的颜色
			                }, {
			                  offset: 0.8,
			                  color: "#D9452C" // 40% 处的颜色
			                }], false)], // 100% 处的颜色
			                [0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			                  offset: 1,
			                  color: "#FFC539" // 70% 处的颜色
			                }, {
			                  offset: 0.8,
			                  color: "#FE951E" // 66% 处的颜色
			                }, {
			                  offset: 0,
			                  color: "#E75F25" // 50% 处的颜色
			                }], false)],
			                [0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                  offset: 1,
			                  color: "#C7DD6B" // 90% 处的颜色
			                }, {
			                  offset: 0.8,
			                  color: "#FEEC49" // 86% 处的颜色
			                }, {
			                  offset: 0,
			                  color: "#FFC539" // 70% 处的颜色
			                }], false)],
			                [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			                  offset: 0.2,
			                  color: "#1CAD52" // 92% 处的颜色
			                }, {
			                  offset: 0,
			                  color: "#C7DD6B" // 90% 处的颜色
			                }], false)]
			              ],
			              width: 10
			            }
			          },
			          splitLine: {
			            show: false
			          },
			          axisTick: {
			            show: false
			          },
			          axisLabel: {
			            show: false
			          },
			          pointer: { //指针样式
			            length: '45%',
			          },
			          detail: {
			            show: false
			          }
			        },
			        {
			          type: "gauge",
			          center: ["50%", "45%"], // 默认全局居中
			          radius: "80%",
			          startAngle: 180,
			          endAngle: 0,
			          axisLine: {
			            show: true,
			            lineStyle: { // 属性lineStyle控制线条样式
			              color: [ //表盘颜色
			                [0.5, "#DA462C"],//0-50%处的颜色
			                [0.7, "#FF9618"],//51%-70%处的颜色
			                [0.9, "#FFED44"],//70%-90%处的颜色
			                [1, "#20AE51"]//90%-100%处的颜色
			              ],
			              width: 15//表盘宽度
			            }
			          },
			
			          splitLine: { //分割线样式（及10、20等长线样式）
			            length: 20,
			            lineStyle: { // 属性lineStyle控制线条样式
			              width: 2
			            }
			          },
			          axisTick: { //刻度线样式（及短线样式）
			            length: 20
			          },
			          axisLabel: { //文字样式（及“10”、“20”等文字样式）
			            color: "white",
			            distance: 5 //文字离表盘的距离
			          },
			          pointer: { //指针样式
			            width: 3,//指针的宽度
			            length: "80%", //指针长度，按照半圆半径的百分比
			          },
			          detail: {
			            formatter: "{score|完成率：{value}%}",
			            offsetCenter: [0, "20%"],
			            rich: {
			              score: {
			                color: "white",
			                fontFamily: "微软雅黑",
			                fontSize: 16
			              }
			            }
			          },
			          data: [{			         
			            value:value
//			            label: {
//			              textStyle: {
//			                color: '#fff',
//			                fontSize: 10
//			              }
//			            }
			          }]
			        }
			      ]
			    }
			    
			  },
				  //获取拆解台数的柱状图表
			  getHistogram: function (dataAxis, data, yMax, allcount) {
			    // var dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			    // var data = [15020, 32150, 41521, 60025, 24512, 15156, 33645, 75645, 95632, 12385, 56641, 101000];
			    // var yMax = 200000;
			    var dataShadow = [];
			    for(var i = 0; i<data.length; i++) {
			      dataShadow.push(yMax);
			    }
			    return {
			    tooltip: {   //这里是给图加上点击的时候显示数据
			        trigger: 'axis',
			        axisPointer: { // 坐标轴指示器，坐标轴触发有效
			          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			        }
			      },
			      title: {
			        text: '拆解台数'+' '+' '+allcount+'台',
			        top: '10%',
			        textStyle: {
			          fontSize: '10',
			          color: "#fff"
			        }
			      },
			      grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '50%',
			        containLabel: true
			      },
			      xAxis: {
			        data: dataAxis,
			        axisLabel: {
			          inside: false,
			          textStyle: {
			            fontSize: '10',
			            color: '#fff'
			          }
			        },
			        axisTick: {
			          show: false
			        },
			        axisLine: {
			          show: false
			        },
			        z: 10
			      },
			      yAxis: {
			        axisLabel: {
			          textStyle: {
			            fontSize: '10',
			            color: '#fff'
			          }
			        }
			      },
			      dataZoom: [
			        {
			          type: 'inside'
			        }
			      ],
			
			      series: [
			        { 
			          name:'拆解台数',
			          type: 'bar',
			          itemStyle: {
			            normal: { 
			            	color: 'rgba(0,0,0,0.05)'
			           	}
			          },
			          barGap: '-100%',
			          barCategoryGap: '20%',
			          data: dataShadow,
			          animation: false
			        },
			        {
			          name:'拆解台数',
			          type: 'bar',
			          label: {
			            normal: {
			              show: false,
			              position: 'top',
			              color: '#83bff6'
			            }
			          },
			          itemStyle: {
			            normal: {
			              color: new echarts.graphic.LinearGradient(
			                0, 0, 0, 1,
			                [
			                  { offset: 0, color: '#83bff6' },
			                  { offset: 0.5, color: '#188df0' },
			                  { offset: 1, color: '#188df0' }
			                ]
			              )
			            },
			            emphasis: {
			              color: new echarts.graphic.LinearGradient(
			                0, 0, 0, 1,
			                [
			                  { offset: 0, color: '#2378f7' },
			                  { offset: 0.7, color: '#2378f7' },
			                  { offset: 1, color: '#83bff6' }
			                ]
			              )
			            }
			          },
			          data: data
			        }
			      ]
			    }
			  },
				 //获取拆解量和产物量的柱状图表
			  echartAxis: function (dataAxis,Cjdata,Cwdata){
			    return {
			      tooltip: {
			        trigger: 'axis',
			        axisPointer: { // 坐标轴指示器，坐标轴触发有效
			          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			        }
			      },
			      color: ['#48cda6', '#fd87ab'],
			      legend: {
			        data: ['拆解量', '产物量'],
			        y: '10%',
			        textStyle: {
			          color: '#fff'
			        }
			      },
			      grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			      },
			      xAxis: {
			        type: 'category',
			        data: dataAxis,
			        axisLabel: {
			          textStyle: {
			            fontSize: '10',
			            color: '#fff'
			          }
			        }
			      },
			      yAxis: {
			        type: 'value',
			        axisLabel: {
			          textStyle: {
			            fontSize: '10',
			            color: '#fff'
			          }
			        }
			      },
			      series: [{
			        name: '拆解量',
			        type: 'bar',
			        data: Cjdata
			      }, {
			        name: '产物量',
			        type: 'bar',
			        data: Cwdata
			      }]
			    }
			  }			
			}
			//最关键的一行代码，调用
//			fn.productInfo('2019-03-01')	
			$(".navLeft").click(function(){
				location.href = "index.html?date="+$(".dataName").html()
			})
			//获取前一个页面传递过来的参数
			if(!date){
				fn.productInfo(getNowTime())
			}else{			
				fn.productInfo(date)
				$(".dataName").html(date)
//				console.log(date.length)
				if(date.length==4){
					$(".rightdate").find(".year").addClass("active").siblings().removeClass("active")
				}else if(date.length==7){
					$(".rightdate").find(".month").addClass("active").siblings().removeClass("active")
				}else{
					$(".rightdate").find(".day").addClass("active").siblings().removeClass("active")
				}
			}

			$(".rightdate span").on('click', function() {
				$(this).addClass("active").siblings().removeClass("active")
				fn.dataName = $(this).attr("data-name")
				if(fn.dataName == "year") {
					fn.yearClick()
				} else if(fn.dataName == "month") {
					fn.monthClick()
				} else {
					fn.dayClick()
				}
			})

			$('.dateImg').on('click', function() {
				var dt = new Date();
                var df= [dt.getFullYear(), (dt.getMonth() + 1), dt.getDate()];
				weui.datePicker({
					start: 2018,
					end: 2020,
					defaultValue: df,
					className: 'time',
					onChange: (result) => {
						var year = document.querySelectorAll(".weui-picker__group")[0]
						var month = document.querySelectorAll(".weui-picker__group")[1]
						var day = document.querySelectorAll(".weui-picker__group")[2]
						if(fn.dataName == "year") {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'none', 'important');
							day.style.setProperty('display', 'none', 'important');
						} else if(fn.dataName == "month") {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'block', 'important');
							day.style.setProperty('display', 'none', 'important');
						} else {
							year.style.setProperty('display', 'block', 'important');
							month.style.setProperty('display', 'block', 'important');
							day.style.setProperty('display', 'block', 'important');
						}
					},
					onConfirm: (result) => {
//						console.log(result)
						if(fn.dataName == "year") {
							fn.data = result[0].value
							fn.productInfo(fn.data)
						} else if(fn.dataName == "month") {
							if(result[1].value<10){
								fn.data = `${result[0].value}-0${result[1].value}`
							}else{
								fn.data = `${result[0].value}-${result[1].value}`
							}						
							fn.productInfo(fn.data)
						} else {
							if(result[1].value<10 && result[2].value<10){
								fn.data = `${result[0].value}-0${result[1].value}-0${result[2].value}`
							}else if(result[1].value<10 && result[2].value>10){
								fn.data = `${result[0].value}-0${result[1].value}-${result[2].value}`
							}else if(result[1].value>10 && result[2].value<10){
								fn.data = `${result[0].value}-${result[1].value}-0${result[2].value}`
							}else{
								fn.data = `${result[0].value}-${result[1].value}-${result[2].value}`
							}
							
							fn.productInfo(fn.data)
						}
						$(".dataName").html(fn.data)
					},
					id: 'datePicker'
				});

			});

			//获取当前年月日时间封装
			function getNowTime(date) {
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				if(month < 10) {
					month = '0' + month;
				};
				if(day < 10) {
					day = '0' + day;
				};
				var formatDate = year;
				var formatMonth = year + '-' + month;
				var formatDay = year + '-' + month + '-' + day;
				if(date == 'year') {
//					console.log(formatDate)
					return formatDate;
				} else if(date == 'month') {
//					console.log(formatMonth)
					return formatMonth
				} else {
//					console.log(formatDay)
					return formatDay
				}
			}
		})
	</script>
</html>
